<template>
  <div class="wrapper">
    <u-navbar title="结算详情">
      <div slot="right" v-if="bill.billStatus == 'OUT'" @click="show = true" class="done">
        对账
      </div>
    </u-navbar>

    <!-- 商家信息 -->
    <div class="box">
      <div class="title">商家信息</div>
      <div class="total">
        <div class="flex col">
          <div>店铺名称</div>
          <div>{{bill.storeName }}</div>
        </div>
        <div class="flex col">
          <div>银行账号</div>
          <div>{{bill.bankAccountNumber }}</div>
        </div>
        <div class="flex col">
          <div>银行开户名</div>
          <div>{{bill.bankAccountName  }}</div>
        </div>
        <div class="flex col">
          <div>支行名称：</div>
          <div>{{bill.bankName }}</div>
        </div>
        <div class="flex col">
          <div>支行联行号：</div>
          <div>{{bill.bankCode  }}</div>
        </div>
      </div>
      <div class="">

      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>

    <!-- 账单详细 -->
    <div class="box" v-if="bill.serviceStatus!='APPLY'">
      <div class="title">账单详细</div>
      <div class="flex col">
        <div>结算单号</div>
        <div>{{ bill.sn  || '暂无'}}</div>
      </div>
      <div class="flex col">
        <div>起止日期</div>
        <div>{{  bill.startTime + "~" + bill.endTime}}</div>
      </div>

      <div class="flex col">
        <div>出帐日期</div>
        <div>{{ bill.createTime}}</div>
      </div>
      <div class="flex col">
        <div>当前店铺</div>
        <div>{{ bill.storeName }}</div>
      </div>
      <div class="flex col">
        <div>平台打款时间</div>
        <div>{{  bill.payTime === null ? "未付款" : bill.payTime}}</div>
      </div>

      <div class="flex col">
        <div>结算金额</div>
        <div>{{  (bill.billPrice?bill.billPrice:0)  | unitPrice}}</div>
      </div>
      <div class="flex col">
        <div>结算详细</div>
        <div>{{ "最终结算金额(" +
       $options.filters.unitPrice(bill.billPrice, "¥") +
        ") = 订单付款总金额(" +
        $options.filters.unitPrice(bill.orderPrice?bill.orderPrice:0, "¥") +
        ") - 退单金额(" +
        $options.filters.unitPrice(bill.refundPrice?bill.refundPrice:0, "¥") +
        ")" +
        "- 平台收取佣金(" +
        $options.filters.unitPrice(bill.commissionPrice?bill.commissionPrice:0, "¥") +
        ") + 退单产生退还佣金金额(" +
        $options.filters.unitPrice(bill.refundCommissionPrice?bill.refundCommissionPrice:0, "¥") +
        ") - 分销返现支出(" +
        $options.filters.unitPrice(bill.distributionCommission?bill.distributionCommission:0, "¥") +
        ") + 退单分销返现返还(" +
        $options.filters.unitPrice(bill.distributionRefundCommission?bill.distributionRefundCommission:0, "¥") +
        ") - 平台优惠券支出(" +
        $options.filters.unitPrice(bill.siteCouponCommission?bill.siteCouponCommission:0, "¥") +
        ") + 退单平台优惠券返还(" +
        $options.filters.unitPrice(bill.siteCouponRefundCommission?bill.siteCouponRefundCommission:0, "¥") +
        ")" }}</div>
      </div>

    </div>
    <!-- 对账模态框 -->
    <u-modal v-model="show" async-close @confirm="done" confirm-color="#333" show-cancel-button title="确认核对结算单" content="您确认要核对此结算单么"></u-modal>
  </div>
</template>

<script>
import { getBillDetail, reconciliation } from "@/api/order";
export default {
  data() {
    return {
      show: false, //对账提示模态框是否显示
      bill: {}, //结算详情
      routerVal: "",

      params: {
        complainId: "",
        content: "",
      },
    };
  },
  onLoad(options) {
    this.routerVal = options;
  },
  onShow() {
    this.init();
  },
  methods: {
    // 初始化投诉详情
    async init() {
      let res = await getBillDetail(this.routerVal.id);
      if (res.data.success) {
        this.bill = res.data.result;
      }
    },
    // 对账
    async done() {
      let res = await reconciliation(this.routerVal.id);
      if (res.data.success) {
        this.show = false;
        this.init();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding-bottom: 200rpx;
}
.box {
  padding: 32rpx;
}
.comments {
  /deep/ .col {
    margin: 24rpx 0;
  }
}
.title {
  font-size: 32rpx;
}
.detail {
  justify-content: space-between;

  border-radius: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
}

.title {
  margin-bottom: 20rpx;
}
.total {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
}
.col {
  overflow: hidden;
  justify-content: space-between;
  margin: 10rpx 0;
  line-height: 1.75;

  > div:nth-of-type(1) {
    font-size: 24rpx;
    color: #999;
    flex: 3;
    display: flex;
    justify-content: flex-start;
  }
  > div:nth-of-type(2) {
    line-height: 1.5;
    font-weight: bold;
    flex: 10;
    margin-left: 20rpx;
    > span {
      font-size: 40rpx;
      margin-left: 10rpx;
    }
  }
  > div {
    margin: 0 4rpx;
    display: flex;

    align-items: center;
    justify-content: flex-end;
  }
}
.done {
  margin-right: 32rpx;
  font-size: 32rpx;
}
</style>